<template>
  <div  class="box">
    <!-- 侧边栏 -->
    <el-menu router :collapse="isCollapse" :collapse-transition="false">

     <!-- 侧边栏循环 -->
     <!-- 循环侧边栏数据判断是否有 -->
      <template v-for="item in $store.state.items"    >

        <template v-if="item.subs">

          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span  slot="title">{{ item.title }}</span>

            </template>

            <template v-for="subItem in item.subs">
              <el-submenu
                v-if="subItem.subs"
                :index="subItem.index"
                :key="subItem.index"
              >
                <template slot="title">{{ subItem.title }}

                </template>

                <el-menu-item
                  v-for="(threeItem, i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                   @click="add(threeItem)"
                  >{{ threeItem.title }}
                  </el-menu-item
                >
              </el-submenu>
              
              <el-menu-item
                v-else
                :index="subItem.index"
                :key="subItem.index"
                 @click="add(subItem)"
                >{{ subItem.title }}
                </el-menu-item
              >
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span @click="add(item)" slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
    
    };
  },
  computed: {
    // 开关
    isCollapse() {
      return this.$store.state.isCollapse;
    },
  },
  watch: {},
  methods: {
    // 通过commit方法来调用
    add(item){
      console.log(item)
      this.$store.commit('add',item)
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
};
</script> 
<style scoped>

</style>
